<template>
  <div class="dashboard">
    <el-card>
      <template #header>
        <div style="font-size: 24px">工作日历</div>
      </template>
      <div style="text-align: right">
        <el-select v-model="year" class="year" @change="changeTime">
          <el-option v-for="i in yearList" :key="i" :label="i" :value="i" />
        </el-select>
        <el-select v-model="month" class="month" @change="changeTime">
          <el-option v-for="i in monthList" :key="i" :label="i" :value="i" />
        </el-select>
      </div>
      <el-calendar v-model="time">
        <template #dateCell="{ date, data }">
          <div class="day" @click="clickDay(date)">
            <span>
              {{ data.day.split('-')[2] }}
            </span>
            <span
              v-if="
                data.type === 'current-month' &&
                  (date.getDay() === 6 || date.getDay() === 0)
              "
              class="rest"
            >
              {{ date | formatDate }}
            </span>
          </div>
        </template>
      </el-calendar>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'WorkCalendar',
  filters: {
    formatDate(time) {
      if (time.getDay() === 6 || time.getDay() === 0) {
        return '休'
      } else {
        return ''
      }
    }
  },
  model: {
    prop: 'valueTime'
  },
  props: {
    valueTime: {
      type: Date,
      default: () => {
        return new Date()
      }
    }
  },
  data() {
    return {
      time: '',
      year: '',
      yearList: [],
      month: '',
      monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }
  },
  watch: {
    valueTime: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.time = newVal
        this.year = newVal.getFullYear()
        this.month = newVal.getMonth() + 1
        const min = this.year - 5
        const max = this.year + 5
        const arr = []
        for (let i = min; i <= max; i++) {
          arr.push(i)
        }
        this.yearList = arr
      }
    }
  },
  methods: {
    changeTime() {
      this.$emit('input', this.year + '-' + this.month + '-01')
    },
    clickDay(date) {
      this.$emit('input', date)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .el-card {
    margin: 180px 0 0 15px;
    width: 930px;
    .year {
      width: 100px;
      height: 30px;
      margin-right: 5px;
      ::v-deep .el-input__inner {
        height: 30px;
        font-size: 12px;
      }
      ::v-deep .el-input__icon {
        line-height: 30px;
      }
    }
    .month {
      width: 70px;
      height: 30px;
      ::v-deep .el-input__inner {
        height: 30px;
        font-size: 12px;
      }
      ::v-deep .el-input__icon {
        line-height: 30px;
      }
    }
    ::v-deep .el-calendar__header {
      display: none;
    }
    ::v-deep thead th:nth-child(6),
    ::v-deep thead th:nth-child(7) {
      color: #fa7c4d;
    }
    ::v-deep tbody tr td {
      border: none;
      .el-calendar-day {
        height: 50px;
        .day {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .rest {
            background: #fa7c4d;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>
